<template>
    <div class="user-container">
        <div>
            <el-button type="primary" @click="editType='add';editObject=null; dialogVisible=true">新增用户</el-button>
        </div>
        <el-table class="table-box" :data="users" style="width: 100%">
            <el-table-column prop="name" label="name" width="180" />
            <el-table-column prop="email" label="email" width="180" />
            <el-table-column prop="creationTime" label="creationTime" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small"
                               @click="handleEditClick(scope.$index, scope.row)"
                    >编辑</el-button
                    >
                    <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                    >Delete</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-box">
            <el-pagination
                v-model:current-page="userParams.pageIndex"
                v-model:page-size="userParams.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :small="true"
                :background="false"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                @size-change="getUsers"
                @current-change="getUsers"
            />
        </div>
        <UserDialog @hanldeRequest="getUsers" :type="editType" :editObject="editObject" :roles="roles" v-model:dialogVisible="dialogVisible"/>
    </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import {usersPage,usersDelete} from "@/api/user"
import UserDialog from "./components/UserDialog.vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import {rolesAll} from "@/api/roles"
import * as dayjs from "dayjs";
defineOptions({
  name: "User",
});

const userParams = ref({
  pageIndex:1,
  pageSize:10
})
const totalCount = ref(0)
const dialogVisible = ref(false);
const editType = ref('add');
const editObject = ref(null);
const users = ref([])
const roles = ref([]);
async function getUsers() {
  const res = await usersPage(userParams.value)
  users.value = res?.items ?? []
  totalCount.value = res?.totalCount ?? 0
}

async function getAllRolse() {
  const res = await rolesAll();
  roles.value = res?.items ?? []
}

getAllRolse();


getUsers();

function handleDelete(index,row) {

  ElMessageBox.confirm(
    '是否删除?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(async () => {
      await usersDelete({id:row.id})
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
      getUsers();
    })


}
function handleEditClick(index,row) {
  editObject.value = row;
  editType.value = 'edit';
  dialogVisible.value = true;
}
</script>

<style lang="scss" scoped>
.user-container {
  padding: 20px;
}
.table-box {
  margin-top: 20px;
}
.pagination-box {
  margin-top: 15px;
}
</style>